<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Thymeleaf Variables</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<main>
    <div th:each="article : ${articles}">
        <a th:text="${article.name}" th:href="${article.url}"></a>
    </div>

    <div th:with="firstArticle=${articles[0]}">
        <a th:text="${firstArticle.name}" th:href="${firstArticle.url}"></a>
    </div>

    <div th:each="article : ${articles}" , th:with="articleName=${article.name}">
        <a th:text="${articleName}" th:href="${article.url}"></a>
    </div>

    <div th:each="article : ${articles}" th:with="articleName=${article.name}, articleUrl=${article.url}">
        <a th:text="${articleName}" th:href="${articleUrl}"></a>
    </div>

    <div id="firstDiv" th:with="firstArticle=${articles[0]}">
        <a th:text="${firstArticle.name}" th:href="${firstArticle.url}"></a>
    </div>
    <div id="secondDiv">
        <h2 th:text="${firstArticle.name}"></h2>
    </div>

    <div id="mainDiv" th:with="articles = ${ { articles[0], articles[1] } }">
        <div th:each="article : ${articles}">
            <a th:text="${article.name}" th:href="${article.url}"></a>
        </div>
    </div>
</main>
</body>
</html>